<!--
 * @Description: text
 * @LastEditors: 蔡霸霸
 * @LastEditTime: 2021-03-03 09:31:05
-->
<template>
  <div class="dialog" v-show="dialogFlag" @click="dialogFlag = false">
    <div class="center">
      <p>Please remember the following number</p>
      <p>请记住以下数字和字母</p>
      <h1>“{{ dataType }}{{ userNum }}”</h1>
      <p>This figure will be asked in asubsequent questionnaire</p>
      <p>该数字将在随后的问卷中，作为问题提及</p>
      <p>点击任意位置关闭</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataType: 'A',
      userNum: 0,
      openHis: false,
      dialogFlag: false
    };
  },
  methods: {
    open(userNum) {
      if (!this.openHis) {
        this.dataType = sessionStorage.dataType;
        this.userNum = userNum;
        this.openHis = true;
        this.dialogFlag = true;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.dialog {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  z-index: 9999999;
  top: 0;
  left: 0;
  .center {
    width: 80vw;
    height: 60vh;
    border: 1px solid red;
    border-radius: 6px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    background-color: #fff;
    padding: 30px 10px;
    text-align: center;
    font-size: 22px;
    line-height: 1.2;
    p {
      text-decoration: underline;
      font-family: "Times New Roman";
      font-weight: 600;
    }
    h1 {
      line-height: 2;
      color: #ff0f00;
    }
  }
}
</style>
